<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    1.vue对象的生命周期
       1).初始化显示
            *beforeCreated()
            *created()
            *beforeMount()
            *mounted()
        2).更新数据
            *beforeUpdate()
            *update()
        3)销毁vue实例:vm.$destory()
            *beforeDestory
            *destoryed()
    2.常用的生命周期方法
        created()/mounted():发送ajax请求,启动定时器等异步任务
        beforeDestory():做收尾工作,如:清除定时器



    -->
    <div>
        <p v-show="isShow">xxxxx</p>
        <button @click="destroyVM">destroy</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            data:{
                isShow:true
            },
           beforeCreate() {
               console.log("beforeCreate");
           },
           //实现数据代理/data数据的监视(setter)
           created() {
               console.log("created");
           },
           beforeMount() {
               console.log("beforeMount")
           },

           
           //初始第一次显示/渲染页面
            /*


            界面初次显示之后立即回调
            一般在此执行异步操作:发送ajax请求/自动定时器/订阅消息/绑定自定义事件监听
            */
            mounted() {
                console.log("mounted")
                //保存数据
             this.intervalId=setInterval(()=>{
                 console.log("----");
                this.isShow=!this.isShow
             },1000)
              /*
             setInterval(function(){
                this.isShow=!this.isShow
             }.bind(this),1000)
            1.返回一个新函数
            2.新函数内部会调用原函数
            3.在调用时指定原函数执行的this为bind()的第一个参数的值
            */
            },
            beforeUpdate() {//未更新的界面(老的界面)
               console.log("beforeUpdate");
           },
           //更新界面

           updated() {//新的界面
               console.log("updated");
           },
            /*
            在vm死亡之前调用
            在此做一些收尾工作
            */
            beforeDestroy() {
                console.log("beforeDestroy");
                clearInterval(this.intervalId);
            },
            destroyed() {
                console.log("destroyed");
            },
            methods:{
                destroyVM(){
                    this.$destroy()
                }
            },
           
        }).$mount('div')
        
    </script>
</body>
</html>